import { Send, CircleX } from 'lucide-react'
import { Button } from '@/components/ui/button'
import formatDistanceToNow from 'date-fns/formatDistanceToNow'
import { Drawer, DrawerClose, DrawerContent, DrawerTrigger } from '@/components/ui/drawer'
import { MailDisplay } from './components/mail-display'
import { useSelector, useDispatch } from 'react-redux'
import { selectCurMention, setCurMention } from '@/store/mention-slice'

export default function MobileList({ mentions }) {
  const curMention = useSelector(selectCurMention)
  const dispatch = useDispatch()

  return (
    <div className="space-y-4">
      {mentions.map(item => (
        <Drawer key={item.id}>
          <DrawerTrigger asChild>
            <div
              className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm bg-white"
              onClick={() =>
                dispatch(
                  setCurMention({
                    ...curMention,
                    selected: item.id,
                  })
                )
              }
            >
              <div className="flex items-start gap-4">
                <div className="flex-1 space-y-1">
                  <div className="flex items-center justify-between">
                    <div className="font-medium">{item.keyword}</div>
                    <time className="text-xs text-muted-foreground">
                      {formatDistanceToNow(new Date(item.createtime * 1000), {
                        addSuffix: true,
                      })}
                    </time>
                  </div>
                  <p className="text-sm leading-relaxed">{item.content}</p>
                  <div className="flex items-center justify-end space-x-4">
                    <Button variant="ghost" size="sm">
                      <Send className="text-primary w-4 mr-1" />
                      Reply
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          </DrawerTrigger>

          <DrawerContent className="bg-white flex flex-col fixed bottom-0 left-0 right-0 h-[85%] rounded-t-[10px]">
            <div className="max-w-md w-full mx-auto flex flex-col overflow-auto">
              <DrawerClose asChild>
                <CircleX className="absolute top-4 right-4" />
              </DrawerClose>
              <div className="p-4 pb-0">
                <MailDisplay mail={mentions.find(item => item.id === curMention.selected) || null} />
              </div>
            </div>
          </DrawerContent>
        </Drawer>
      ))}
    </div>
  )
}
